<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gridly</title>
  <link rel="stylesheet" href="css/jquery.gridly.css">
  <link rel="stylesheet" href="javascripts/layui/css/layui.css">
  <link rel="stylesheet" href="css/css.css">
  <link rel="stylesheet" href="css/module.css">
<link rel="stylesheet" href="javascripts/MiniColors/jquery.minicolors.css">
</head>

<body>

  <div class="layui-container diy_phone_box" id="diyBox">
    <div class="layui-row">
      <div class="layui-col-md6 layui-col-lg6 left">
        <div class="phone_frame">
          <div class="inner_screem">
            <div class="gridly">


              <!-- <div class="brick item module_searchBar">
                <img class="logo" src="http://via.placeholder.com/90x30" alt="logo">
                <img class="scan_logo" src="http://via.placeholder.com/34x34" alt="扫码图标">
                <div class="layui-input-block">
                  <input type="text" placeholder="请输入查詢内容" class="layui-input search_input">
                </div>
              </div> -->
              <module-searchbar></module-searchbar>

              <div class="brick item module_slider" @click="setRightView({title:'轮播设置'})">
                <div class="layui-carousel class">
                  <div carousel-item>
                    <div>条目1</div>
                    <div>条目2</div>
                    <div>条目3</div>
                    <div>条目4</div>
                    <div>条目5</div>
                  </div>
                </div>
              </div>

              <div class="brick item demo" @click="setRightView({title:'设置1'})">1
                <div>asd</div>
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置2'})">2
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置3'})">3
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置4'})">4
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置5'})">5
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置6'})">6
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置7'})">7
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置8'})">8
              </div>
              <div class="brick item demo" @click="setRightView({title:'设置9'})">9
              </div>



            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6 layui-col-lg6 right">
        <component v-bind:is="rightView"></component>
        <div class="module_seaerchbar_set">
          <div class="layui-form-item">
            <label class="layui-form-label">搜索框提示</label>
            <div class="layui-input-block">
              <input type="text"  required="" lay-verify="required" placeholder="搜索框提示" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">背景颜色</label>
            <div class="layui-input-block">
                <input type="text"  class="colorPick layui-input" data-control="hue" value="#ff6161">
              <!-- <input type="text"  required="" lay-verify="required" placeholder="背景颜色" autocomplete="off" class="layui-input"> -->
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">LOGO</label>
            <div class="layui-input-block">
              <input type="file" placeholder="LOGO">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">扫码 LOGO</label>
            <div class="layui-input-block">
              <input type="file" placeholder="LOGO">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/jquery.gridly.js"></script>
<script src="javascripts/layui/layui.all.js"></script>
<script src="javascripts/vue.js"></script>
<script src="javascripts/module.js"></script>
<script src="javascripts/common.js"></script>
<script src="javascripts/MiniColors/jquery.minicolors.min.js"></script>
<script>

  addSearchBar({
    img_logo: 'http://via.placeholder.com/90x30',
    img_scan: 'http://via.placeholder.com/34x34',
    text_search_placeholder: '请输入查詢内容'
  })


  var vm = new Vue({
    el: '#diyBox',
    data: {
      rightView: ''
    },
    methods: {
      //子组件点击时触发，修改右边设置视图
      setRightView(e) {
        console.log(e)
        console.log(111111111111)
        this.rightView = e
      }
    }
  })

  /* ------------------------------------------------------ */

  $(function () {
    init()
  })

  //页面初始化
  function init() {

    // gridly 初始化设置
    $('.gridly').gridly({
      base: 60,
      gutter: 0,
      columns: 1
    });

    //初始化 模块框
    $('.inner_screem .brick.item').each(function (i, e) {
      var color = randomColor()
      // console.log(color)
      $(this).css('background-color', color)
      $(this).append('<i class="layui-icon layui-icon-close close_btn"></i>')
      $(this).append('<div class="select_line"></div>')

      $('.close_btn').click(function () {
        $(this).parent().remove()
      })
    })

    //模块选中效果
    $('.inner_screem .brick.item').click(function () {
      $('.inner_screem .brick.item').removeClass('select')
      $(this).addClass('select')
    })

    //选中第一个
    if ($('.inner_screem .brick.item')) {
      $($('.inner_screem .brick.item')[0]).click()
    }

    $('.colorPick').minicolors({
          control: $('.colorPick').attr('data-control') || 'hue',
          change: function(hex, opacity) {
            var log;
            try {
              log = hex ? hex : 'transparent';
              if( opacity ) log += ', ' + opacity;
              console.log(log);
            } catch(e) {}
          },
          theme: 'default'
        });

  }

  // 轮播
  layui.use('carousel', function () {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '.class'
      , width: '100%' //设置容器宽度
      , arrow: 'none' //始终显示箭头
      , height: '150px'
      , interval: '5000'
      //,anim: 'updown' //切换动画方式
    });
  });
</script>

</html>